<template>
  <view class="login-container">
    <view class="login-header">
      <image class="logo" src="/static/images/logo.png" mode="aspectFit" />
      <text class="title">站设备监视软件</text>
    </view>

    <view class="login-form">
      <view class="form-item">
        <text class="icon">👤</text>
        <input
          type="text"
          v-model="username"
          placeholder="请输入用户名"
          @input="validateForm"
        />
      </view>
      <view class="form-item">
        <text class="icon">🔒</text>
        <input
          :type="showPassword ? 'text' : 'password'"
          v-model="password"
          placeholder="请输入密码"
          @input="validateForm"
        />
        <text class="eye-icon" @click="togglePasswordVisibility">
          {{ showPassword ? '👁️' : '👁️‍🗨️' }}
        </text>
      </view>

      <view class="form-options">
        <label class="remember-pwd">
          <switch 
            :checked="rememberPassword" 
            @change="handleRememberChange"
            color="#0066cc"
            style="transform: scale(0.7);"
          />
          <text>记住密码</text>
        </label>
        <text class="forgot-pwd" @click="handleForgotPassword">忘记密码？</text>
      </view>

      <button 
        class="login-btn" 
        :disabled="!isFormValid"
        @click="handleLogin"
      >
        登录
      </button>
    </view>

    <view class="login-footer">
      <text class="copyright">© 2024 站设备监视软件 版权所有</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

const username = ref('')
const password = ref('')
const showPassword = ref(false)
const rememberPassword = ref(false)
const isFormValid = ref(false)

const validateForm = () => {
  isFormValid.value = username.value.length > 0 && password.value.length >= 6
}

const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}

const handleRememberChange = (e) => {
  rememberPassword.value = e.detail.value
}

const handleForgotPassword = () => {
  uni.showToast({
    title: '请联系系统管理员重置密码',
    icon: 'none'
  })
}

const handleLogin = async () => {
  try {
    const result = await userStore.login({
      username: username.value,
      password: password.value
    })

    if (result.success) {
      if (rememberPassword.value) {
        uni.setStorageSync('remembered_username', username.value)
        uni.setStorageSync('remembered_password', password.value)
      } else {
        uni.removeStorageSync('remembered_username')
        uni.removeStorageSync('remembered_password')
      }

      uni.showToast({
        title: '登录成功',
        icon: 'success'
      })

      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/index/index'
        })
      }, 1500)
    } else {
      uni.showToast({
        title: result.message || '登录失败',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('登录失败:', error)
    uni.showToast({
      title: '登录失败，请稍后重试',
      icon: 'none'
    })
  }
}

onMounted(() => {
  const rememberedUsername = uni.getStorageSync('remembered_username')
  const rememberedPassword = uni.getStorageSync('remembered_password')
  
  if (rememberedUsername && rememberedPassword) {
    username.value = rememberedUsername
    password.value = rememberedPassword
    rememberPassword.value = true
    validateForm()
  }
})
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  padding: 60rpx;
}

.login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100rpx;
  margin-bottom: 80rpx;

  .logo {
    width: 160rpx;
    height: 160rpx;
    margin-bottom: 30rpx;
  }

  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333333;
  }
}

.login-form {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .form-item {
    display: flex;
    align-items: center;
    height: 100rpx;
    background-color: #f5f5f5;
    border-radius: 50rpx;
    padding: 0 30rpx;
    margin-bottom: 30rpx;

    .icon {
      font-size: 32rpx;
      color: #666666;
    }

    input {
      flex: 1;
      height: 100%;
      margin-left: 20rpx;
      font-size: 28rpx;
    }

    .eye-icon {
      padding: 20rpx;
      margin-right: -20rpx;
      font-size: 32rpx;
      color: #666666;
    }
  }

  .form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;

    .remember-pwd {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      color: #666666;
    }

    .forgot-pwd {
      font-size: 26rpx;
      color: #0066cc;
    }
  }

  .login-btn {
    width: 100%;
    height: 88rpx;
    background-color: #0066cc;
    color: #ffffff;
    border-radius: 44rpx;
    font-size: 32rpx;
    margin-top: 20rpx;

    &::after {
      border: none;
    }

    &:disabled {
      opacity: 0.5;
    }
  }
}

.login-footer {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 40rpx;

  .copyright {
    font-size: 24rpx;
    color: #999999;
  }
}
</style> 